<template>
  <el-form ref="formRef" :model="form" label-width="auto" style="max-width: 400px">
    <el-form-item label="分类名称" prop="name"> 
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="分类级别">
      <el-radio-group v-model="showMore">
        <el-radio :label="false" >一级分类</el-radio>
        <el-radio :label="true" >二级分类</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="分类选择" v-show="showMore" prop="pid">
      <el-select v-model="form.pid" placeholder="请选择上级类别">
        <el-option
         v-model:file-list="fileList"
          v-for="item in categoryList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="分类图片" prop="picture" v-show="showMore">
        <el-upload
        ref="uploadRef"
        class="upload-demo"
        v-model:file-list="fileList"
        action="http://127.0.0.1:8360/admin/upload/picture"
        :headers="{ jwt: token }"
        :data="{ type: 'category_picture' }"
        :limit="1"
        :on-exceed="handleExceed"
        :on-success="uploadSuccess"
        >
        <template #trigger>
          <el-button type="primary">请选择图片</el-button>
        </template>
        <template #tip>
          <div class="el-upload__tip">图片文件大小不超过500KB</div>
        </template>
      </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="editSubmit" v-if="id">修改</el-button>
      <el-button type="primary" @click="addSubmit" v-else>新增</el-button>
      <el-button @click="resetForm()">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getCategory, getCategoryList,addCategory,editCategory } from "../api/api";
import useToken from "../stores/token";
import notification from "../utils/notification";
const {token} = useToken()
const formRef = ref()
const categoryList = ref([]);
const emit = defineEmits("success")
const uploadRef = ref()
const fileList = ref([])
onMounted(()=>{
    // console.log("daa");
    loadCategory()
})
const props = defineProps({
  id: {
    type: Number,
  },
});
const form = reactive({
  id: props.id,
  name: "",
  pid: "",
  picture: "",
});
const showMore = ref();
const loadCategory = async () => {
    // console.log("asyn");
    if(form.id){
        //查阅当前信息
        const data = await getCategory({"id":form.id})
        if (data.picture !== '') {
      const fileName = data.picture.substring(data.picture.lastIndexOf('/') + 1)
      if (fileName) {
        fileList.value = [{ name: fileName, url: data.picture }]
      }
    }
        Object.assign(form,data)
    }
  const list = await getCategoryList();
//   console.log(list);
  
  categoryList.value = list.filter(item => 
    item.pid == 0
  );
  //console.log(categoryList.value);
  showMore.value = form.pid != 0
};
//重置内容
const resetForm = ()=>{
    formRef.value.resetFields()
    //修改数据有回显
    loadCategory()
}
const resetF = (id)=>{
    form.id = id;
    resetForm()
}
defineExpose({resetF})
const editSubmit =async ()=>{
if(await editCategory(form)){
    emit('success')
}

}
const addSubmit =async ()=>{
const data = {
    name:form.name,
    picture:form.picture,
    pid:form.pid
}
if(await addCategory(data)){
    emit('success')
}
}
const handleExceed = files => {
  uploadRef.value.clearFiles()
  uploadRef.value.handleStart(files[0])
  uploadRef.value.submit()
}
const uploadSuccess = response =>{
    const {errno,errmsg,data} = response
    if(errno != 0){
        notification({
            message:errmsg,
            type:'error'
        })
    }else{
        if(errmsg !== ''){
            notification({
            message:errmsg,
            type:'success'
        })
        }
        form.picture = data.savepath
    }

}
</script>
